<!-- 
    @Description:二次封装ElementUI的弹出框组件 
    @Author:lxy 
    @Date:2023-03-23 10:23  
-->
<template>
  <div class="dialogTemplateClass">
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      :width="outWidth"
      :modal="modal"
      :top="top"
      :close-on-press-escape="closeOnPressEscape"
      :show-close="showClose"
      :destroy-on-close="destroyOnClose"
      @open="openHanler"
      @close="closeHanler"
      class="dialogCLass"
    >
      
      <div class="outerMainClass">
        <slot name="outerMain"></slot>
      </div>
      <div slot="footer">
        <slot name="outerFooter"></slot>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DialogTemplate",
  props: {
    //弹窗框标题
    title: {
      typeof: String,
      default: "",
    },
    // 一层弹出框的开关
    // dialogFormVisible:{
    //     typeof:Boolean,
    //     default:false
    // },
    //弹出框宽度   %。。。
    outWidth: {
      typeof: String,
      default: "50%",
    },
    //是否需要遮罩层
    modal: {
      typeof: Boolean,
      default: true,
    },
    //按ESC是否可以关闭弹框
    closeOnPressEscape: {
      typeof: Boolean,
      default: true,
    },
    //是否显示关闭按钮
    showClose: {
      typeof: Boolean,
      default: true,
    },
    //关闭时是否销毁Dialog里面的元素
    destroyOnClose: {
      typeof: Boolean,
      default: true,
    },
    //Dialog CSS 中的 margin-top 值
    top: {
      typeof: String,
      default: "15vh",
    },
  },
  data() {
    return {
      // 一层弹出框的开关
      dialogFormVisible: false,
    };
  },
  methods: {
    openDialogOne() {
      //打开一层弹出框
      this.dialogFormVisible = true;
    },
    closeDialogOne() {
      //关闭一层弹出框
      this.dialogFormVisible = false;
    },
    openHanler() {
      // console.log("弹出框打开的回调");
      this.dialogFormVisible = true;
    },
    closeHanler() {
      this.dialogFormVisible = false;
      this.$emit("closeHanler");
    },
  },
};
</script>

<style scoped lang="less">
// .outerMainClass{
//     background-color: aqua;
// }
</style>
